<template>
    <div>
      <v-md-editor
        v-model="editorValue"
        :disabled-menus="[]"
        height="calc(100vh - 150px)"
        @upload-image="handleUploadImage"
         @copy-code-success="handleCopyCodeSuccess"
      />
    </div>
  </template>
  
  <script>
import axios from 'axios';

  export default {
    name: "MdEditor",
    props: {
      // 接收值父组件传递值
      content: String
    },
    data() {
      return {
        editorValue: this.content != null ? this.content : '',
      }
    },
    watch: {
      editorValue: function(newNum, oldNum) {
        // 修改调用者传入的值
        this.$emit('update:content', newNum)
        console.log(oldNum);
      }
    },
    methods: {
      handleCopyCodeSuccess(code) {
      console.log(code);
    },
      // v-md-editor 文件上传
      handleUploadImage(event, insertImage, files) {
        const formData = new FormData();
        formData.append("file", files[0]);
      console.log(formData);
        let user = JSON.parse(localStorage.getItem("user" || '{}'))
        if (user != null) {

          axios.post(this.$baseUrl + '/upload', formData,
            {
              // 因为我们上传了图片,因此需要单独执行请求头的Content-Type
              headers: {
                // 表示上传的是文件,而不是普通的表单数据
                'Content-Type': 'multipart/form-data',
                'token': user.token
              }
            }
          ).then(res => {
            console.log(res);
            if (res.data.code == 1) {
              insertImage({ url: res.data.data });
            }
          })
        }
      },
    }
  }
  </script>
  
  <style>
  </style>
  
  